<template>
	<div class="fileSearch">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>HASH查询</span>
			</div>
			<div class="forms">
				<el-form :inline="true" :rules="rules" :model="formInline" label-suffix=":" class="demo-form-inline"
					label-width="80px">
					<el-form-item label="样本库" prop="type">
						<el-select v-model="formInline.type" placeholder="请选择" @change="changeType">
							<el-option label="default" value="default"></el-option>
							<el-option v-for="item in options" :key="item.url" :label="item.data.name"
								:value="item.data.name"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<el-form ref="formall" :inline="true" :rules="rules" :model="formInline" label-suffix=":"
					class="demo-form-inline" label-width="80px">
					<el-form-item label="HSAH值" prop="value">
						<el-input v-model="formInline.value" @input="inputValue" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" :loading="onceLoading" @click="goSearch">搜索</el-button>
					</el-form-item>
				</el-form>
				<el-form ref="form" :inline="true" :model="form" label-width="80px">
					<el-form-item label="导入文件">
						<div class="dialog-footer">
							<el-input v-model="fileName" placeholder="" size="normal" disabled></el-input>
						</div>
						<span style="color: red">{{ error }}</span>
						<input type="file" id="files" @change="changeFile" />
					</el-form-item>
					<el-form-item label="">
						<el-button type="primary" @click="uploadFile">选择文件</el-button>
						<el-button type="primary" :loading="loading" @click="submitUpload">上传文件</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
		<el-card shadow="always" class="box-card " :body-style="{ padding: '20px' }">
			<div slot="header">
				<span>历史线索查询搜索项</span>
				<el-select v-model="sortType" placeholder="顺序" class="sort-select" @change="sortChange">
					<el-option v-for="item in optionsSort" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<div style="float: right;">
					<div style="display: flex;align-items: center;font-size: 15px;">
						<div>每页 </div>
						<div class="limit-input">
							<el-input v-model="limit" size="mini" style="width: 50px;" @blur="inputBlur"></el-input>
						</div>
						<div> 条</div>
					</div>
				</div>
			</div>
			<div class="tables">
				<el-table :data="tableData" style="width: 96%">
					<el-table-column prop="id" :default-sort="{prop: 'id', order: 'descending'}" sortable label="项目编号">
						<template slot-scope="{row}">{{ row.data.id }}</template>
					</el-table-column>
					<el-table-column prop="sha256" label="SHA256">
						<template slot-scope="{row}">{{ row.data.sha256 }}</template>
					</el-table-column>
					<el-table-column prop="name" label="样本名称">
						<template slot-scope="{row}">{{ row.data.name }}</template>
					</el-table-column>
					<el-table-column prop="mime" label="MIME类型">
						<template slot-scope="{row}">{{ row.data.mime }}</template>
					</el-table-column>
					<el-table-column prop="status" label="样本大小">
						<template slot-scope="{row}">{{ (row.data.size / 1024).toFixed(2) }} kb</template>
					</el-table-column>
					<!-- <el-table-column prop="result" label="标签">
						<template slot-scope="{row}">{{ row.data.crc32 }}</template>
					</el-table-column> -->
					<el-table-column fixed="right" label="操作" width="100">
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="details(scope.$index, scope.row)">查看详情
							</el-button>
							<!-- <el-button type="text" size="small">删除</el-button> -->
						</template>
					</el-table-column>
				</el-table>
				<div class="div_pagination">
					<el-pagination layout="total, prev, pager, next" :total="total" :current-page.sync="offset"
						:page-size.sync="limit" @current-change="history" />
				</div>
			</div>
		</el-card>
	</div>
</template>

<script>
	import qs from 'qs'
	export default {
		data() {
			return {
				onceLoading: false,
				loading: false,
				options: [],
				sortType: 'des',
				optionsSort: [{
					value: 'des',
					label: '倒序'
				}, {
					value: 'asc',
					label: '顺序'
				}],
				resultList: [{
						value: 'malicious',
						label: '恶意的',
					},
					{
						value: 'normal',
						label: '正常的',
					},
					{
						value: 'suspicious',
						label: '可疑的',
					},
				],
				fileList: [],
				value: 'spasibosberbank.ru',
				formInline: {
					type: 'default',
					value: '',
				},
				rules: {
					type: [{
						required: true,
						message: '请选择数据类型',
						trigger: 'blur'
					}],
					value: [{
						required: true,
						message: '请输入HASH值',
						trigger: 'blur'
					}],
				},
				form: {},
				offset: 1,
				limit: 10,
				total: 0,
				formlist: {
					offset: 0,
					limit: 10
				},
				fileName: '',
				error: '',
				tableData: [],
				text: '开始分析',
				message: '',
				timer: null,
				fileType: ['jpg', 'png', 'doc', 'mp3', 'dll', 'exe', 'ipa', 'bin', 'ttf']
			}
		},
		mounted() {
			this.getProjectList()
		},
		beforeDestroy() {
			this.timer && clearInterval(this.timer)
		},
		methods: {
			changeType() {
				sessionStorage.setItem('byUrl', this.formInline.type)
				this.history()
			},
			inputValue() {
				this.formInline.value = this.formInline.value.trim()
			},
			inputBlur(e) {
				this.history()
			},
			async getProjectList() {
				await this.historyCount()
				let parmas = this.formInline
				this.options = await this.$api.getProject(parmas)
				this.options = this.options.data.results
				// this.formInline.type = this.options[0].data.name
				this.history()
			},

			async historyCount() {
				this.formlist.offset = this.offset == 1 ? 0 : (this.offset - 1) * this.limit
				this.formlist.limit = this.limit * this.offset
				let parmas = this.formInline
				let parmas1 = this.formlist
				let api3 = await this.$api.getFileHistoryPage(parmas, parmas1)
				this.total = api3.data.count
			},

			async history() {
				this.sortSearch()
				let parmas = this.formInline
				let parmas1 = this.formlist
				let api3 = await this.$api.getFileHistoryPage(parmas, parmas1)
				this.total = api3.data.count
				if (this.sortType == 'des') {
					this.tableData = this.sortTable(api3.data.results)
				}else{
					this.tableData = api3.data.results
				}
				this.$message.success('刷新成功')
			},
			async historySearch() {
				this.sortSearch()
				let parmas = this.formInline
				let parmas1 = this.formlist
				parmas1.value = this.formInline.value
				let api3 = await this.$api.getFileHistoryPageSearch(parmas, parmas1)
				this.total = api3.data.count
				if (this.sortType == 'des') {
					this.tableData = this.sortTable(api3.data.results)
				}else{
					this.tableData = api3.data.results
				}
				this.$message.success('搜索成功')
			},
			
			sortChange(e){
				this.sortSearch('s')
				this.history()
			},	
			
			sortSearch(type) {
				if (type == 's') {
					this.offset = 1
					this.limit = 10
					return
				}
				if (this.sortType == 'asc') {
					this.formlist.offset = this.offset == 1 ? 0 : (this.offset - 1) * this.limit
					this.formlist.limit = this.limit * this.offset
				} else {
					this.formlist.limit = this.offset == 1 ? this.total : this.total - (this.offset - 1) * this.limit
					this.formlist.offset = this.formlist.limit < 10 ? 0 : this.total - this.offset * this.limit
				}
			},

			sortTable(tableData) {
				let arr = []
				tableData.forEach(item => {
					arr.unshift(item)
				})
				return arr
			},

			details(index, row) {
				// this.$router.push({
				// 	path: `fileDetails`,
				// 	query: {
				// 		id: row.data.id,
				// 		type: this.formInline.type,
				// 		value: row.data.sha256,
				// 	},
				// })
				const {
					href
				} = this.$router.resolve({
					path: `fileDetails`,
					query: {
						id: row.data.id,
						type: this.formInline.type,
						value: row.data.sha256,
					},
				});
				window.open(href, '_blank');
			},
			// [3,2,4,5,3,4]
			// console.log('print', i,j);console.log('printArr', arr[i], arr[j]);
			goSearch() {
				this.$refs['formall'].validate((valid) => {
					if (valid) {
						this.formlist.offset = 0
						this.formlist.limit = 10
						this.historySearch()
					} else {
						return false;
					}
				});
			},
			uploadFile() {
				var f = document.getElementById('files')
				f.click()
			},
			changeFile() {
				var f = document.getElementById('files')
				let arr = f.files[0].name.split('.')
				// if (this.fileType.includes(arr[1])) {
				this.error = ''
				this.fileName = f.files[0].name
				// } else {
				// 	this.error = '只能上传二进制文件'
				// 	this.$message.error(this.error)
				// }
			},
			async submitUpload() {
				this.text = '正在上传'
				this.loading = true
				let file = document.getElementById('files').files[0]
				if (file) {
					let formData = new FormData()
					formData.append('file', file)
					formData.append('fileName', this.fileName)
					let parmas = this.formInline
					// let { data: res } = await this.$api.getFileUpload(parmas, formData)
					let data = await this.$api.getFileUpload(parmas, formData).then(res => {
						this.loading = false
						this.$message.success('上传成功')
						this.sortSearch('s')
						this.history()
					}).catch(err => {
						this.loading = false
						// this.$message.error('上传失败')
						this.$message.error(err.data.error.message)
					})
					// this.text = '开始分析'
					// this.loading = false
					// if (res.code === 200) {
					// 	this.$message.success('上传成功')
					// 	this.formlist.offset = 1
					// 	this.history()
					// 	// this.timer && clearInterval(this.timer)
					// 	// this.timer = setInterval(() => {
					// 	// 	this.history()
					// 	// }, 5000)
					// } else {
					// 	this.$message.error('上传失败')
					// }
				} else {
					this.text = '开始分析'
					this.loading = false
					this.$message.error('请选择文件')
				}
			},
		},
	}
</script>
<style scoped>
	.div_pagination {
		display: flex;
		flex-direction: row-reverse;
		margin: 10px 0;
		font-size: 14px
	}

	.fileSearch {
		width: 98%;
		height: 87%;
		margin: 20px auto;
	}

	.forms {
		padding-left: 20px;
	}

	.bottom {
		width: 100%;
		height: 82.2%;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
	}

	.tables {
		width: 100%;
		height: 92%;
	}

	p {
		margin-left: 20px;
		font-size: 16px;
		font-weight: 600;
	}

	.bottom p {
		margin-top: 20px;
	}

	.tables>.el-table {
		margin-left: 20px;
	}

	.el-pagination {
		text-align: center;
		margin-top: 20px;
	}
</style>

<style>
	.fileSearch .el-input--suffix .el-input__inner {
		padding-right: 30px;
		width: 300px;
	}

	.fileSearch .el-input__inner {
		width: 300px;
	}

	.limit-input {
		margin: 0 10px;
	}

	.limit-input .el-input__inner {
		width: 50px;
	}

	.upload-demo {
		display: inline-block;
		margin-right: 40px;
	}

	.fileSearch .sort-select {
		margin-left: 20px;
	}

	.fileSearch .sort-select .el-input__inner {
		width: 100px;
	}

	#files {
		display: none;
	}
</style>
